<template>
  <div class="nav1">
    <NavTitle title="客流量分布" />
    <div>
      <div class="flex justify-end p-8px">
        <NavButton
          v-for="(item, index) in menuList"
          :key="item.title"
          :plain="activeIndex !== index"
          @click="handleBtn(item, index)"
        >{{ item.title }}</NavButton>
      </div>
      <div class="h-235px">
        <DwChart :options="options" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as echarts from 'echarts'
import NavTitle from '@/components/NavTitle'
import DwChart from '@/components/Chart'
import NavButton from '@/components/NavButton'
import { websiteDateStaticsApi } from '@/api'

const options = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(0, 255, 233,0)'
          }, {
            offset: 0.5,
            color: 'rgba(255, 255, 255,1)'
          }, {
            offset: 1,
            color: 'rgba(0, 255, 233,0)'
          }],
          global: false
        }
      }
    }
  },
  legend: {
    show: true,
    y: '10',
    icon: 'stack',
    itemWidth: 10,
    itemHeight: 10,
    data: [{
      name: '进入人数',
      textStyle: {
        color: '#00F6FF'
      }
    }, {
      name: '离开人数',
      textStyle: {
        color: '#007CFF'
      }
    }]
  },
  grid: {
    top: '18%',
    left: '12%',
    right: '5%',
    bottom: '15%'
  },
  xAxis: [{
    axisLine: {
      show: false
    },
    type: 'category',
    axisLabel: {
      fontSize: 12,
      color: '#fff'
    },
    boundaryGap: false,
    data: ['星期一', '星期二', '星期三', '显示四', '星期五', '星期六', '星期天']
  }],

  yAxis: [{
    type: 'value',
    name: '(人)',
    nameTextStyle: {
      color: '#B8D3F1',
      fontSize: 12,
      padding: [0, 0, 10, -50]
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(87, 206, 234, 0.1)'
      }
    },
    axisLabel: {
      margin: 15,
      textStyle: {
        color: '#B8D3F1',
        fontSize: 12
      }
    }
  }],
  series: [{
    name: '进入人数',
    type: 'line',
    symbol: 'circle',
    symbolSize: 12,
    itemStyle: {
      // 设置线条上点的颜色（和图例的颜色）
      normal: {
        color: '#00F6FF'
      },
      emphasis: {
        borderColor: '#fff',
        borderWidth: 3,
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2
      }
    },
    lineStyle: {
      normal: {
        width: 2, // 设置线宽为2
        color: '#00F6FF' // 修改进入人数线的颜色
      }
    },
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(0,202,149,0.3)'
        },
        {
          offset: 1,
          color: 'rgba(0,202,149,0)'
        }
        ], false),
        shadowColor: 'rgba(0,202,149, 0.9)',
        shadowBlur: 20
      }
    },
    data: []
  },
  {
    name: '离开人数',
    type: 'line',
    symbol: 'circle',
    symbolSize: 12,
    itemStyle: {
      // 设置线条上点的颜色（和图例的颜色）
      normal: {
        color: '#007CFF'
      },
      emphasis: {
        borderColor: '#fff',
        borderWidth: 3,
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2
      }
    },
    lineStyle: {
      normal: {
        width: 2, // 设置线宽为2
        color: '#007CFF' // 修改离开人数线的颜色
      }
    },
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(108,80,243,0.3)'
        },
        {
          offset: 1,
          color: 'rgba(108,80,243,0)'
        }
        ], false),
        shadowColor: 'rgba(108,80,243, 0.9)',
        shadowBlur: 20
      }
    },
    data: []
  }
  ]
})

const menuList = ref([
  {
    title: '周客流量',
    type: 'week'
  },
  {
    title: '月客流量',
    type: 'month'
  },
  {
    title: '年客流量',
    type: 'year'
  }
])

const getData = async (type) => {
  const { data } = await websiteDateStaticsApi({
    DateType: type
  })

  const xAxis = []
  const series1 = []
  const series2 = []
  data.forEach(item => {
    xAxis.push(item.title)
    series1.push(item.totalEnter)
    series2.push(item.totalExit)
  })

  options.value.xAxis[0].data = xAxis
  options.value.series[0].data = series1
  options.value.series[1].data = series2
}

getData('week')

const activeIndex = ref(0)

const handleBtn = (item, index) => {
  getData(item.type)
  activeIndex.value = index
}

</script>

<style lang="scss" scoped>
.nav1 {}
</style>
